<template>
  <div class="app-container">
    <!-- 查询 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="服务器名称" prop="serverName">
        <el-input
          v-model="queryParams.serverName"
          placeholder="请输入关键字"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务类型" prop="serverTypeId">
        <el-select v-model="queryParams.serverTypeId" placeholder="请选择服务类型">
          <el-option
            v-for="(i, k) in typeList"
            :key="k"
            :label="i.serverType"
            :value="i.serverTypeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="dataList" border>
      <el-table-column
        label="服务器名称"
        align="center"
        prop="serverName"
        show-overflow-tooltip
      />
      <el-table-column label="CPU" align="center" prop="cpu" show-overflow-tooltip />
      <el-table-column
        label="服务类型"
        align="center"
        prop="serverTypeId"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ getTypeName(scope.row.serverTypeId) }}
        </template>
      </el-table-column>
      <el-table-column label="内存" align="center" prop="memory" show-overflow-tooltip />
      <el-table-column
        label="硬盘"
        align="center"
        prop="hardDisk"
        show-overflow-tooltip
      />
      <el-table-column label="防御" align="center" prop="defense" show-overflow-tooltip />
      <el-table-column
        label="宽带"
        align="center"
        prop="bandwidth"
        show-overflow-tooltip
      />
      <el-table-column label="IP" align="center" prop="ip" show-overflow-tooltip />
      <el-table-column
        label="计费模式"
        align="center"
        prop="billingMode"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.billingMode | ctChargeType }}
        </template>
      </el-table-column>
      <el-table-column label="区域" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ ctChargeArea(scope.row.areaId) }}
        </template>
      </el-table-column>
      <el-table-column
        label="价格(元)"
        align="center"
        prop="price"
        show-overflow-tooltip
      />
      <el-table-column label="是否置顶" align="center" prop="topped">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.topped ? 'success' : 'info'"
            @click="handleTop(scope.row)"
          >
            {{ scope.row.topped ? "置顶" : "未置顶" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="其它" align="center" prop="other" show-overflow-tooltip />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:config:edit']"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:config:remove']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.params.pageNum"
      :limit.sync="queryParams.params.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      :title="form.govId ? '修改参数' : '新增参数'"
      :visible.sync="open"
      width="50%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        class="form-box"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <div>
          <el-form-item label="服务器名称" prop="serverName">
            <el-input v-model="form.serverName" placeholder="请输入服务器名称" />
          </el-form-item>
          <el-form-item label="CPU" prop="cpu">
            <el-input v-model="form.cpu" placeholder="请输入CPU" />
          </el-form-item>
          <el-form-item label="硬盘" prop="hardDisk">
            <el-input v-model="form.hardDisk" placeholder="请输入硬盘" />
          </el-form-item>
          <el-form-item label="宽带" prop="bandwidth">
            <el-input v-model="form.bandwidth" placeholder="请输入宽带" />
          </el-form-item>
          <el-form-item label="计费模式" prop="billingMode">
            <el-select
              v-model="billingModeValue"
              style="width: 100%"
              placeholder="请选择计费模式"
              @change="chargeType"
            >
              <el-option label="按次" value="0" />
              <el-option label="按月" value="30" />
              <el-option label="按年" value="365" />
            </el-select>
          </el-form-item>
          <el-form-item label="区域" prop="areaId">
            <el-select v-model="form.areaId" style="width: 100%" placeholder="请选择区域">
              <el-option
                v-for="(i, k) in areaList"
                :key="k"
                :label="i.name"
                :value="i.id"
              />
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="服务类型" prop="serverTypeId">
            <el-select
              v-model="form.serverTypeId"
              style="width: 100%"
              placeholder="请选择服务类型"
            >
              <el-option
                v-for="(i, k) in typeList"
                :key="k"
                :label="i.serverType"
                :value="i.serverTypeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="内存" prop="memory">
            <el-input v-model="form.memory" placeholder="请输入内存" />
          </el-form-item>

          <el-form-item label="防御" prop="defense">
            <el-input v-model="form.defense" placeholder="请输入防御" />
          </el-form-item>
          <el-form-item label="IP" prop="ip">
            <el-input v-model="form.ip" placeholder="请输入IP" />
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="form.price" type="number" placeholder="请输入价格" />
          </el-form-item>
          <el-form-item label="其它" prop="other">
            <el-input v-model="form.other" placeholder="请输入其它" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listGovList, addGov, updateGov, govAreaList, delGov } from "@/api/system/config";
import { listType } from "@/api/system/type";

export default {
  data() {
    return {
      loading: false, // 遮罩层
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      dataList: [], // 参数表格数据
      open: false, // 是否显示弹出层
      areaList: [], // 区域列表

      // 查询参数
      queryParams: {
        params: {
          pageNum: 1,
          pageSize: 10,
        },
        serverName: undefined,
        serverTypeId: undefined,
      },
      form: {}, // 表单参数
      typeList: [], // 类型列表
      // 表单校验
      rules: {
        serverName: [{ required: true, message: "服务器名称不能为空", trigger: "blur" }],
        serverTypeId: [{ required: true, message: "服务类型不能为空", trigger: "blur" }],
        // cpu: [{ required: true, message: "CPU不能为空", trigger: "blur" }],
        // memory: [{ required: true, message: "内存不能为空", trigger: "blur" }],
        // hardDisk: [{ required: true, message: "硬盘不能为空", trigger: "blur" }],
        // bandwidth: [{ required: true, message: "带宽不能为空", trigger: "blur" }],
        // defense: [{ required: true, message: "防御不能为空", trigger: "blur" }],
        // ip: [{ required: true, message: "IP不能为空", trigger: "blur" }],
        billingMode: [{ required: true, message: "计费方式不能为空", trigger: "blur" }],
        price: [
          { required: true, message: "价格不能为空", trigger: "blur" },
          { pattern: /^(0\.\d+|[1-9]\d*(\.\d+)?)$/, message: "价格不能小于等于0" },
        ],
      },
      billingModeValue: "",
    };
  },
  created() {
    this.getList();
    this.getAreaList();
    this.getTypeList();
  },
  methods: {
    chargeType(e) {
      this.form.billingMode = e;
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      listGovList(this.queryParams)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        govId: null,
        areaId: "",
        serverName: "",
        serverTypeId: "",
        cpu: "",
        memory: "",
        hardDisk: "",
        defense: "",
        bandwidth: "",
        ip: "",
        other: "",
        billingMode: "",
        price: 0,
        topped: false,
      };
      this.resetForm("form");
    },
    // 获取类型列表
    getTypeList() {
      listType({
        params: {
          pageNum: 1,
          pageSize: 1000,
        },
      }).then((res) => {
        this.typeList = res.rows;
      });
    },
    // 获取区域名称
    ctChargeArea(areaId) {
      let row = this.areaList.find((item) => item.id == areaId);
      return row ? row.name : "";
    },
    // 查询区域列表
    getAreaList() {
      govAreaList().then((res) => {
        this.areaList = res.data;
      });
    },
    // 获取类型名称
    getTypeName(id) {
      let row = this.typeList.find((i) => i.serverTypeId == id);
      return row ? row.serverType : "";
    },
    // 置顶与取消
    handleTop(row) {
      this.$confirm(`确认是否${row.topped ? "取消置顶" : "置顶"}该服务器？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            topped: !row.topped,
            govId: row.govId,
          };
          updateGov(data).then((res) => {
            row.topped = !row.topped;
            this.$modal.msgSuccess("修改成功");
          });
        })
        .catch(() => {});
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.params.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = Object.assign({}, row);
      this.open = true;
      this.billingModeValue = JSON.parse(JSON.stringify(this.form.billingMode));
      if (0 == this.billingModeValue) {
        this.billingModeValue = "按次";
      } else if (1 == this.billingModeValue) {
        this.billingModeValue = "按天";
      } else if (30 == this.billingModeValue) {
        this.billingModeValue = "按月";
      } else if (365 == this.billingModeValue) {
        this.billingModeValue = "按年";
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.govId) {
            updateGov(this.form).then((res) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addGov(this.form).then((res) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除【" + row.serverName + "】？")
        .then(() => {
          delGov([row.govId]).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.form-box {
  display: flex;
  div {
    flex: 1;
  }
}
::v-deep .el-tag {
  cursor: pointer;
}
</style>
